<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/table/select.html' as select />
<#import '${ctx}/biz/chart/element/chart_detail2.html' as cd/>
<#import '${ctx}/biz/chart/element/metric-select2.html' as metric />
<@cd.detail>
<div class="layui-row">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">选择数据源</label>
            <div class="layui-input-block"><@select.table name="dsId"
                show="dsName" url="${ctx}/biz/c/p/ds-select-table" />
            </div>
        </div>
        <label>指标设置</label>
        <hr/>
        <@metric.atom url="${ctx}/biz/chart/data"/>
    </form>
</div>
</@cd.detail>
<script type="text/javascript">
	var chartIndex = 0;
	var fieldMap = {};
	layui.use(['layer','appJs'],function(){
		var $ = layui.$
		,layer = layui.layer
		,app = layui.appJs;


		function getTextAttrs(cfg) {
			  return {
			    ...cfg.style,
			    fontSize: cfg.data.size,
			    text: cfg.data.text,
			    textAlign: 'center',
			    fontFamily: cfg.data.font,
			    fill: cfg.color,
			    textBaseline: 'Alphabetic'
			  };
			}


		window.handleResponse = function(chart,data) {
			// 给 point 注册一个词云的 shape
			G2.registerShape('point', 'cloud', {
			  draw(cfg, container) {
			    const attrs = getTextAttrs(cfg);
			    const textShape = container.addShape('text', {
			      attrs: {
			        ...attrs,
			        x: cfg.x,
			        y: cfg.y
			      }
			    });
			    if (cfg.data.rotate) {
			    	G2.Util.rotate(textShape, cfg.data.rotate * Math.PI / 180);
			    }
			    return textShape;
			  }
			});
			let fl = data.fieldList;
			let json = data.requestJson;
			let jsonObj = JSON.parse(json);
			let p = "";
			for(let f in fl){
				if(p == "") {
					p = fl[f].id+"";
				}else {
					p = p + "*" + fl[f].id;
				}
			}
			let m = jsonObj.metric;
			while(m[0] && m[0].metric){
				m = m[0].metric;
			}
			let met = "__doc";
			let tag = 0;
			if(m[0]) {
				console.log(m[0].type)
				if(m[0].type == 'avg' || m[0].type == 'sum') {
					tag = 1;
					met = m[0].type
				}
			}
			 const dv = new DataSet.View().source(data.listData);
			    const range = dv.range(met);
			    const min = range[0];
			    const max = range[1];
			    const imageMask = new Image();
			      dv.transform({
			        type: 'tag-cloud',
			        fields: [p, met],
			        imageMask,
			        font: 'Verdana',
			        size: [600, 400], // 宽高设置最好根据 imageMask 做调整
			        padding: 0,
			        timeInterval: 5000, // max execute time
			        rotate() {
			          let random = ~~(Math.random() * 4) % 4;
			          if (random === 2) {
			            random = 0;
			          }
			          return random * 90; // 0, 90, 270
			        },
			        fontSize(d) {
			          return ((d[met] - min) / (max - min)) * (32 - 8) + 8;
			        }
			      });
			      chart.data(dv.rows);
			      chart.scale({
			        x: { nice: false },
			        y: { nice: false }
			      });
			      chart.legend(false);
			      chart.axis(false);
			      chart.tooltip({
			        showTitle: false,
			        showMarkers: false
			      });
			      chart.coordinate().reflect();
			      chart.point()
			        .position('x*y')
			        .color('text')
			        .shape('cloud')
			        .state({
			          active: {
			            style: {
			              fillOpacity: 0.4
			            }
			          }
			        });
			      chart.interaction('element-active');
			      chart.render();
		}

	});
</script>